<template>
	<view v-if="value" class="modal-box">
		
		<view class="modal-container" id="modal-version-2">
			<view class="modal version-2">
				<view class="modal-header">
					<h2 class="modal-title floating">拼写完成！</h2>
					<p class="modal-subtitle">
						你坚持完成了所有单词的复习，真棒！
					</p>
				</view>

				<view class="stats-container">
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.total || 421}}
						</view>
						<view class="stat-label">总数</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.trueNum || 4}}
						</view>
						<view class="stat-label">完成</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.falseNum || 0}}
						</view>
						<view class="stat-label">遗忘</view>
					</view>
					<view class="stat-card last-card">
						<view class="stat-value">
							{{wordData && wordData.subNum || 100}}%
						</view>
						<view class="stat-label">记忆率</view>
					</view>
				</view>

				<view class="message">
					<p class="message-text">
						学习如登山，每一步都让你站得更高！<br />
						你今天复习的<span class="highlight">每一个单词</span>，都是未来沟通的基石。
					</p>
				</view>

				<view class="action-buttons">
					<button class="btn btn-continue" @click.stop="continueChoose">继续挑战更多单词</button>
					<button class="btn btn-close"  @click.stop="overStudy">
						结束学习
					</button>
				</view>
			</view>
			<view class="confetti" style="
		                    left: 89.5061%;
		                    animation-delay: 0.0184553s;
		                    background-color: rgb(231, 76, 60);
		                    width: 12.0488px;
		                    height: 12.0488px;
		                "></view>
			<view class="confetti" style="
		                    left: 35.5219%;
		                    animation-delay: 3.39752s;
		                    background-color: rgb(231, 76, 60);
		                    width: 14.7973px;
		                    height: 14.7973px;
		                "></view>
			<view class="confetti" style="
		                    left: 11.4623%;
		                    animation-delay: 2.21195s;
		                    background-color: rgb(52, 152, 219);
		                    width: 10.0431px;
		                    height: 10.0431px;
		                "></view>
			<view class="confetti" style="
		                    left: 49.8157%;
		                    animation-delay: 4.5157s;
		                    background-color: rgb(52, 152, 219);
		                    width: 13.0845px;
		                    height: 13.0845px;
		                "></view>
			<view class="confetti" style="
		                    left: 6.1664%;
		                    animation-delay: 1.01843s;
		                    background-color: rgb(155, 89, 182);
		                    width: 5.55369px;
		                    height: 5.55369px;
		                "></view>
			<view class="confetti" style="
		                    left: 66.3412%;
		                    animation-delay: 0.122092s;
		                    background-color: rgb(46, 204, 113);
		                    width: 5.0651px;
		                    height: 5.0651px;
		                "></view>
			<view class="confetti" style="
		                    left: 17.4688%;
		                    animation-delay: 3.53714s;
		                    background-color: rgb(52, 152, 219);
		                    width: 13.0055px;
		                    height: 13.0055px;
		                "></view>
			<view class="confetti" style="
		                    left: 83.1066%;
		                    animation-delay: 4.00415s;
		                    background-color: rgb(155, 89, 182);
		                    width: 13.1672px;
		                    height: 13.1672px;
		                "></view>
			<view class="confetti" style="
		                    left: 24.0126%;
		                    animation-delay: 4.55464s;
		                    background-color: rgb(52, 152, 219);
		                    width: 9.85639px;
		                    height: 9.85639px;
		                "></view>
			<view class="confetti" style="
		                    left: 51.0732%;
		                    animation-delay: 0.85973s;
		                    background-color: rgb(52, 152, 219);
		                    width: 8.13122px;
		                    height: 8.13122px;
		                "></view>
			<view class="confetti" style="
		                    left: 70.4417%;
		                    animation-delay: 1.7172s;
		                    background-color: rgb(241, 196, 15);
		                    width: 8.41768px;
		                    height: 8.41768px;
		                "></view>
			<view class="confetti" style="
		                    left: 37.0314%;
		                    animation-delay: 0.643789s;
		                    background-color: rgb(231, 76, 60);
		                    width: 13.91px;
		                    height: 13.91px;
		                "></view>
			<view class="confetti" style="
		                    left: 40.5574%;
		                    animation-delay: 3.01636s;
		                    background-color: rgb(231, 76, 60);
		                    width: 6.38258px;
		                    height: 6.38258px;
		                "></view>
			<view class="confetti" style="
		                    left: 73.1563%;
		                    animation-delay: 0.553823s;
		                    background-color: rgb(155, 89, 182);
		                    width: 9.00895px;
		                    height: 9.00895px;
		                "></view>
			<view class="confetti" style="
		                    left: 22.0425%;
		                    animation-delay: 1.31589s;
		                    background-color: rgb(155, 89, 182);
		                    width: 10.7059px;
		                    height: 10.7059px;
		                "></view>
			<view class="confetti" style="
		                    left: 73.8737%;
		                    animation-delay: 4.5879s;
		                    background-color: rgb(46, 204, 113);
		                    width: 8.33734px;
		                    height: 8.33734px;
		                "></view>
			<view class="confetti" style="
		                    left: 35.2696%;
		                    animation-delay: 4.82375s;
		                    background-color: rgb(241, 196, 15);
		                    width: 7.18802px;
		                    height: 7.18802px;
		                "></view>
			<view class="confetti" style="
		                    left: 7.28266%;
		                    animation-delay: 1.52198s;
		                    background-color: rgb(46, 204, 113);
		                    width: 6.71647px;
		                    height: 6.71647px;
		                "></view>
			<view class="confetti" style="
		                    left: 71.7123%;
		                    animation-delay: 2.8381s;
		                    background-color: rgb(231, 76, 60);
		                    width: 8.18474px;
		                    height: 8.18474px;
		                "></view>
			<view class="confetti" style="
		                    left: 29.9289%;
		                    animation-delay: 1.40756s;
		                    background-color: rgb(46, 204, 113);
		                    width: 6.39667px;
		                    height: 6.39667px;
		                "></view>
			<view class="confetti" style="
		                    left: 26.8583%;
		                    animation-delay: 4.29964s;
		                    background-color: rgb(52, 152, 219);
		                    width: 8.04527px;
		                    height: 8.04527px;
		                "></view>
			<view class="confetti" style="
		                    left: 33.3051%;
		                    animation-delay: 3.23602s;
		                    background-color: rgb(52, 152, 219);
		                    width: 6.32734px;
		                    height: 6.32734px;
		                "></view>
			<view class="confetti" style="
		                    left: 32.9014%;
		                    animation-delay: 0.703914s;
		                    background-color: rgb(46, 204, 113);
		                    width: 5.36542px;
		                    height: 5.36542px;
		                "></view>
			<view class="confetti" style="
		                    left: 0.921552%;
		                    animation-delay: 0.119461s;
		                    background-color: rgb(155, 89, 182);
		                    width: 13.3397px;
		                    height: 13.3397px;
		                "></view>
			<view class="confetti" style="
		                    left: 1.83459%;
		                    animation-delay: 0.452009s;
		                    background-color: rgb(46, 204, 113);
		                    width: 8.92055px;
		                    height: 8.92055px;
		                "></view>
			<view class="confetti" style="
		                    left: 23.7847%;
		                    animation-delay: 3.59383s;
		                    background-color: rgb(46, 204, 113);
		                    width: 13.1954px;
		                    height: 13.1954px;
		                "></view>
			<view class="confetti" style="
		                    left: 63.572%;
		                    animation-delay: 0.383814s;
		                    background-color: rgb(155, 89, 182);
		                    width: 11.4838px;
		                    height: 11.4838px;
		                "></view>
			<view class="confetti" style="
		                    left: 5.94949%;
		                    animation-delay: 1.54969s;
		                    background-color: rgb(46, 204, 113);
		                    width: 13.0445px;
		                    height: 13.0445px;
		                "></view>
			<view class="confetti" style="
		                    left: 54.4193%;
		                    animation-delay: 0.14826s;
		                    background-color: rgb(231, 76, 60);
		                    width: 9.0676px;
		                    height: 9.0676px;
		                "></view>
			<view class="confetti" style="
		                    left: 22.4062%;
		                    animation-delay: 1.29341s;
		                    background-color: rgb(155, 89, 182);
		                    width: 7.69524px;
		                    height: 7.69524px;
		                "></view>
			<view class="confetti" style="
		                    left: 20.7255%;
		                    animation-delay: 4.23244s;
		                    background-color: rgb(155, 89, 182);
		                    width: 8.19406px;
		                    height: 8.19406px;
		                "></view>
			<view class="confetti" style="
		                    left: 18.6221%;
		                    animation-delay: 4.74556s;
		                    background-color: rgb(241, 196, 15);
		                    width: 7.34738px;
		                    height: 7.34738px;
		                "></view>
			<view class="confetti" style="
		                    left: 51.1975%;
		                    animation-delay: 3.17965s;
		                    background-color: rgb(155, 89, 182);
		                    width: 12.9641px;
		                    height: 12.9641px;
		                "></view>
			<view class="confetti" style="
		                    left: 81.3322%;
		                    animation-delay: 0.450019s;
		                    background-color: rgb(231, 76, 60);
		                    width: 9.07069px;
		                    height: 9.07069px;
		                "></view>
			<view class="confetti" style="
		                    left: 3.06307%;
		                    animation-delay: 2.30355s;
		                    background-color: rgb(231, 76, 60);
		                    width: 14.8074px;
		                    height: 14.8074px;
		                "></view>
			<view class="confetti" style="
		                    left: 62.6914%;
		                    animation-delay: 4.28078s;
		                    background-color: rgb(52, 152, 219);
		                    width: 10.654px;
		                    height: 10.654px;
		                "></view>
			<view class="confetti" style="
		                    left: 36.4466%;
		                    animation-delay: 2.44432s;
		                    background-color: rgb(231, 76, 60);
		                    width: 7.57616px;
		                    height: 7.57616px;
		                "></view>
			<view class="confetti" style="
		                    left: 40.4785%;
		                    animation-delay: 4.40117s;
		                    background-color: rgb(46, 204, 113);
		                    width: 10.284px;
		                    height: 10.284px;
		                "></view>
			<view class="confetti" style="
		                    left: 33.8086%;
		                    animation-delay: 2.38703s;
		                    background-color: rgb(46, 204, 113);
		                    width: 8.88102px;
		                    height: 8.88102px;
		                "></view>
			<view class="confetti" style="
		                    left: 89.9186%;
		                    animation-delay: 1.48008s;
		                    background-color: rgb(46, 204, 113);
		                    width: 11.948px;
		                    height: 11.948px;
		                "></view>
			<view class="confetti" style="
		                    left: 31.9296%;
		                    animation-delay: 2.36355s;
		                    background-color: rgb(241, 196, 15);
		                    width: 12.4754px;
		                    height: 12.4754px;
		                "></view>
			<view class="confetti" style="
		                    left: 54.6513%;
		                    animation-delay: 3.64575s;
		                    background-color: rgb(52, 152, 219);
		                    width: 9.05467px;
		                    height: 9.05467px;
		                "></view>
			<view class="confetti" style="
		                    left: 95.2642%;
		                    animation-delay: 2.31759s;
		                    background-color: rgb(52, 152, 219);
		                    width: 12.9372px;
		                    height: 12.9372px;
		                "></view>
			<view class="confetti" style="
		                    left: 23.9893%;
		                    animation-delay: 0.0525182s;
		                    background-color: rgb(52, 152, 219);
		                    width: 7.13812px;
		                    height: 7.13812px;
		                "></view>
			<view class="confetti" style="
		                    left: 83.5758%;
		                    animation-delay: 1.46041s;
		                    background-color: rgb(155, 89, 182);
		                    width: 6.19047px;
		                    height: 6.19047px;
		                "></view>
			<view class="confetti" style="
		                    left: 29.5226%;
		                    animation-delay: 4.92039s;
		                    background-color: rgb(46, 204, 113);
		                    width: 5.42348px;
		                    height: 5.42348px;
		                "></view>
			<view class="confetti" style="
		                    left: 52.6269%;
		                    animation-delay: 3.00453s;
		                    background-color: rgb(241, 196, 15);
		                    width: 7.83562px;
		                    height: 7.83562px;
		                "></view>
			<view class="confetti" style="
		                    left: 32.4844%;
		                    animation-delay: 3.96723s;
		                    background-color: rgb(241, 196, 15);
		                    width: 10.205px;
		                    height: 10.205px;
		                "></view>
			<view class="confetti" style="
		                    left: 64.9744%;
		                    animation-delay: 2.90675s;
		                    background-color: rgb(241, 196, 15);
		                    width: 6.67517px;
		                    height: 6.67517px;
		                "></view>
			<view class="confetti" style="
		                    left: 43.336%;
		                    animation-delay: 0.439192s;
		                    background-color: rgb(46, 204, 113);
		                    width: 8.39984px;
		                    height: 8.39984px;
		                "></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			wordData: {
				type: Object,
				default: () => null
			}
		},
		computed:{
			commonData (){
				return this.$store.state.commonData
			},
		},
		
		data() {
			return {
				showActive: false,
				keyWord:'xiaoxue',
				keyIndex:0,
			}
		},
		created() {
			this.keyIndex = Math.floor(Math.random() * 6);
		},
		mounted() {},
		methods: {
			showModal() {
				this.showActive = true
			},
			closeModal() {
				this.showActive = false
			},
			continueReview() {
				this.showActive = false
				this.$emit('input', false)
				this.$emit('continueReview')
			},
			overStudy() {
				this.$emit('input', false)
				this.showActive = false
				this.$emit('overStudy')
			},
		}
	}
</script>
<style lang="scss" scoped>
	.modal-box {
		position: fixed;
		z-index: 1001;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(33, 33, 33, 0.5);
	}

	@import url("../modal.css");
</style>